<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img
            src="../../assets/zjt2.png"
            alt=""
            class="back"
            @click="back()"
          />
        </div>
        <div class="head-search">工作经历</div>
        <div @click="save">保存</div>
      </div>
    </div>
    <div class="content">
      <div class="inpBox">
        <span>公司名称</span>
        <div>
          <input
            type="text"
            v-model="UserExperience.companyName"
            placeholder="请输入公司名称"
          />
        </div>
      </div>
      <div class="inpBox">
        <span>所属岗位</span>
        <div>
          <input
            type="text"
            v-model="UserExperience.jobName"
            placeholder="请输入岗位名称"
          />
        </div>
      </div>
      <div class="inpBox">
        <span>工作开始时间</span>
        <div>
          <input
            type="date"
            v-model="UserExperience.entryTime"
            placeholder="请输入工作时间"
          />
        </div>
      </div>
      <div class="inpBox">
        <span>工作结束时间</span>
        <div>
          <input
            type="date"
            v-model="UserExperience.departureTime"
            placeholder="请输入工作时间"
          />
        </div>
      </div>
      <div class="inpBoxs">
        <div class="inpBox">
          <span>项目经验</span>
          <div style="color:#757575">选填</div>
        </div>
        <textarea
          name=""
          id=""
          placeholder="请描述你的项目经验..."
          v-model="UserExperience.description"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "work",
  components: {},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.status = this.$route.params.status;
    this.init();
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为状态，0是新增，1是修改
      status: "",
      userId: window.localStorage.getItem("userId"),
      UserExperience: {
        companyName: "",
        jobName: "",
        entryTime: "",
        departureTime: "",
        description: ""
      }
    };
  },
  // methods 编写js函数
  methods: {
    // 保存数据
    save() {
      console.log(this.status);

      if (this.status == 0) {
        this.saveWork();
      } else if (this.status == 1) {
        this.updateWork();
      } else {
        console.log("无效的状态值。未执行任何操作。");
      }
    },
    //添加工作经历
    saveWork() {
      this.$http({
        url: this.apiURL + "/userExperience/save",
        method: "post",
        data: {
          userExperience: this.UserExperience, // 直接传递 UserExperience 对象
          userId: this.userId
        }
      })
        .then(({ data }) => {
          // 成功处理
          console.log(data);
          this.$router.push({
            name: "usersResume"
          });
        })
        .catch(error => {
          // 错误处理
          console.error("Save work experience error: ", error);
        });
    },
    //修改工作经历
    updateWork() {
      this.$http({
        url: this.apiURL + "/userExperience/update",
        method: "post",
        data: {
          userExperience: this.UserExperience, // 直接传递 UserExperience 对象
        }
      })
        .then(({ data }) => {
          // 成功处理
          console.log(data);
          this.$router.push({
            name: "usersResume"
          });
        })
        .catch(error => {
          // 错误处理
          console.error("Save work experience error: ", error);
        });
    },
    init() {
      console.log(this.status)
      this.$http({
        method: "post",
        url: this.apiURL + "/userExperience/list",
        params: {
          userId: this.userId
        }
      }).then(({ data }) => {
        console.log(data);
        this.UserExperience =
          data && data.UserExperience ? data.UserExperience : {};
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}

.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}

.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.back {
  width: 14px;
  height: 14px;
}

.head div img {
  width: 20px;
  height: 20px;
}

.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}

.inpBox div {
  display: flex;
  align-items: center;
}

.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.inpBoxs .inpBox {
  border: 0;
}

.inpBoxs textarea {
  width: 100%;
  height: 150px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
